<template>
  <div class="nav">
    <div class="top">
      <span @click="urlFn()" class="iconfont icon-arrow_left"></span>
      <img src="@/assets/images/5.png" alt="" />
      <banner></banner>
      <loop></loop>
    </div>
    <div class="title">为您精选</div>
    <choiceness></choiceness>
  </div>
</template>

<script>
import "@/assets/css/reset.css";
import "@/assets/icon/iconfont.css";
import banner from './ui/banner.vue'
import loop from './ui/loop.vue'
import Choiceness from './ui/choiceness.vue';
export default {
    components:{
        banner,
        loop,
        Choiceness
    },
    methods:{
      urlFn(){
        this.$router.push('/show')
      }
    }
};
</script>

<style lang="scss" scoped>

.top {
  width: 100%;
  height: 220px;
  background: linear-gradient(
      90deg,
      rgb(255, 160, 51) 0%,
      rgb(255, 128, 48) 100%
    )
    0% 0% / 100%;
    border-radius: 0 0 30% 30%;
}
.top span.iconfont{
    color: #fff;
    line-height: 60px;
    font-size: 30px;
    font-weight: 600;
    margin-left: 10px;
}
.top img{
    margin-left: 120px;
}

banner{
    position: absolute;
    top: 0;
}
.title{
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    margin-top: 120px;
    background: #f5f5f9;
    color: #f15d71;
    font-weight: 600;
}
</style>